import { defineConfig, loadEnv } from "vite";
import viteBaseConfig from "./vite,base,config.js";
import viteDevConfig from "./vite,dev,config.js";
import viteProdConfig from "./vite,共享选项,config.js";

import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

//策略模式
const envResolver = {
  build: () => {
    return {
      ...viteBaseConfig,
      ...viteDevConfig,
    };
  },

  serve: () => {
    return {
      ...viteBaseConfig,
      ...viteProdConfig,
    };
  },
};

export default defineConfig(({ mode, command }) => {
  console.log("command", command);
  /**
   * 环境变量
   * process.cwd()为项目根目录
   * mode为开发环境或生产环境
   * loadEnv 加载环境变量
   */
  const env = loadEnv(mode, process.cwd(), "");
  return {
    server: {
      //端口
      port: env.VITE_PORT,
      // 是否自动打开浏览器
      open: false,
    },
    envPrefix: "VITE_", // 配置环境变量前缀
    plugins: [
      vue(),
      AutoImport({
        //自动导入element-plus
        resolvers: [ElementPlusResolver()],
        //自动导入vue、vue-router、pinia
        imports: [
          "vue",
          "vue-router",
          "pinia",
          // 可添加其他
        ],
        // 生成类型声明文件
        dts: true,
      }),
      Components({
        //自动导入element-plus
        resolvers: [ElementPlusResolver()],
      }),
    ],
    resolve: {
      alias: {
        //修改根目录，__dirname：获取当前文件目录，主要在 Node.js/SSR 环境使用
        "@": resolve(__dirname, "./src"),
      },
    },

    //css 配置
    css: {
      /**
       * 配置 CSS Modules 的行为
       */
      modules: {
        /**
         * 类名转换规则
         * 可选值:
         * - 'camelCase': 同时提供原始名称和驼峰名称 (styles['btn-primary'] 和 styles.btnPrimary)
         * - 'camelCaseOnly': 只提供驼峰名称 (styles.btnPrimary)
         * - 'dashes': 同时提供原始名称和驼峰名称 (与 camelCase 相同)
         * - 'dashesOnly': 只转换短横线命名 (styles.btnPrimary 可以访问 .btn-primary)
         * - 函数: 自定义转换函数
         */
        localsConvention: "camelCase",

        /**
         * CSS Modules 的作用域行为
         * 可选值:
         * - 'local': 局部作用域 (默认)
         * - 'global': 全局作用域
         */
        scopeBehaviour: "local",

        /**
         * 生成 CSS 类名的函数或格式字符串
         * 示例:
         * - '[name]__[local]___[hash:base64:5]': 生成类似 "App__header___1abc2"
         * - (name, filename, css) => string: 自定义函数
         */
        generateScopedName: "[name]__[local]___[hash:base64:5]",

        /**
         * 全局模块路径的正则表达式数组
         * 匹配到的文件将作为全局 CSS Modules 处理
         */
        globalModulePaths: [/\.global\.css$/, /\.global\.scss$/],

        /**
         * 哈希前缀，用于生成更独特的类名
         */
        hashPrefix: "prefix",

        /**
         * 在开发环境和生产环境使用不同的类名生成策略
         * 开发环境: 可读性更好
         * 生产环境: 更短的哈希值
         */
        exportGlobals: false,
      },

      /**
       * 预处理器配置 (Less, Sass, Stylus)
       */
      preprocessorOptions: {
        /**
         * Less 配置
         */
        less: {
          /**
           * Less 数学计算模式配置
           * 控制 Less 中数学运算的行为方式
           *
           * 可选值:
           * - 'always': 总是进行数学计算 (默认)
           * - 'parens-division': 只有在括号内才进行除法运算
           * - 'parens': 只有在括号内才进行数学运算
           * - 'strict': 严格模式，只在括号内进行运算且需要明确单位
           * - 'strict-legacy': 传统严格模式 (Less 3.x 兼容)
           */
          math: "always",

          /**
           * 全局附加数据，会在每个 Less 文件开头注入
           * 可用于注入变量、mixin 等
           */
          additionalData: `
          @primary-color: #1890ff;
          @bg-color: #f0f2f5;
        `,

          /**
           * 传递给 Less 的选项
           * 查看 Less 文档获取完整选项: http://lesscss.org/usage/#less-options
           */
          modifyVars: {
            // 修改 Less 变量
            "primary-color": "#1DA57A",
          },

          /**
           * Less 插件
           */
          plugins: [],

          /**
           * 是否启用 JavaScript
           */
          javascriptEnabled: true,

          /**
           * 源映射选项
           */
          sourceMap: true,

          /**
           * 字符集
           */
          charset: true,

          /**
           * 是否启用内联 JavaScript
           */
          inlineJavaScript: false,

          /**
           * 是否启用 URL 重写
           */
          rewriteUrls: "all",

          /**
           * 是否启用严格单位
           */
          strictUnits: false,

          /**
           * 是否启用严格数学
           */
          strictMath: false,

          /**
           * 全局变量
           */
          globalVars: {
            "global-var": "red",
          },
        },

        /**
         * Sass/SCSS 配置
         */
        scss: {
          /**
           * 全局附加数据
           */
          additionalData: `
          $primary-color: #1890ff;
          $bg-color: #f0f2f5;
        `,

          /**
           * 传递给 Sass 的选项
           * 查看 Sass 文档获取完整选项: https://sass-lang.com/documentation/js-api#options
           */
          sassOptions: {
            // 包含路径
            includePaths: ["src/styles"],
            // 输出样式: 'expanded' | 'compressed'
            style: "expanded",
            // 是否静默编译错误
            quietDeps: false,
            // 源映射选项
            sourceMap: true,
            // 是否更新到最新语法
            alertColor: true,
            // 是否启用调试信息
            debug: false,
            // 字符集
            charset: true,
            // 是否静默
            silent: false,
            // 同步函数
            functions: {},
            // 导入器
            importers: [],
            // 加载路径
            loadPaths: [],
            // 输出样式
            outputStyle: "expanded",
            // 源映射包含来源内容
            sourceMapContents: true,
            // 源映射嵌入
            sourceMapEmbed: false,
            // 源映射根路径
            sourceMapRoot: "",
          },
        },

        /**
         * Stylus 配置
         */
        stylus: {
          /**
           * 全局附加数据
           */
          additionalData: `
          primary-color = #1890ff
          bg-color = #f0f2f5
        `,

          /**
           * 传递给 Stylus 的选项
           */
          stylusOptions: {
            // 定义全局变量
            define: {
              "primary-color": "#1890ff",
            },
            // 包含路径
            paths: ["src/styles"],
            // 是否压缩
            compress: false,
            // 源映射
            sourcemap: true,
            // 行号
            linenos: false,
            // 使用 CSS 导入
            "include css": true,
            // 解析 URL
            "resolve url": true,
            // 导入
            import: [],
            // 包含
            include: [],
            // 设置
            set: {},
            // 使用插件
            use: [],
          },
        },
      },

      /**
       * 是否启用开发环境css源映射
       */
      devSourcemap: true,

      /**
       * PostCSS 配置
       * 可以是:
       * - 对象: PostCSS 配置对象
       * - 字符串: PostCSS 配置文件的路径
       * - 函数: 返回 PostCSS 配置的函数
       * - 数组: PostCSS 插件数组
       */
      postcss: {
        /**
         * PostCSS 插件
         */
        plugins: [
          // 例如: require('autoprefixer')
        ],

        /**
         * 传递给 PostCSS 的选项
         */
        options: {
          /**
           * 语法解析器
           */
          parser: "sugarss",

          /**
           * 字符串化器
           */
          stringifier: undefined,

          /**
           * 源映射
           */
          sourceMap: true,

          /**
           * 从何处读取源内容
           */
          from: undefined,

          /**
           * 输出到何处
           */
          to: undefined,
        },
      },

      /**
       * 传递给 CSS 预处理器的配置
       */
      preprocessorMaxWorkers: 0,

      /**
       * CSS 代码拆分配置
       */
      chunkFileNames: "assets/[name]-[hash].css",

      /**
       * 是否启用 CSS 源映射
       * 可选值:
       * - boolean: true | false
       * - 'inline': 内联源映射
       * - 'hidden': 隐藏源映射
       */
      sourceMap: true,

      /**
       * 压缩选项
       */
      minify: true,

      /**
       *  Lightning CSS 配置 (实验性)
       */
      lightningcss: {
        /**
         * 目标浏览器
         */
        targets: {
          chrome: 95,
          firefox: 78,
          safari: 12,
          edge: 95,
        },

        /**
         * 是否包含伪元素
         */
        include: ":hover",

        /**
         * 排除的伪元素
         */
        exclude: ":active",

        /**
         * CSS 模块配置
         */
        cssModules: {
          pattern: "[name]__[local]",
        },

        /**
         * 草案语法
         */
        drafts: {
          nesting: true,
          customMedia: true,
        },

        /**
         * 非标准语法
         */
        nonStandard: {
          deepSelectorCombinator: true,
        },

        /**
         * 错误恢复
         */
        errorRecovery: true,
      },
    },
    build: {
      // ========== 输出目录配置 ==========

      /**
       * 构建输出的目录（相对于项目根目录）
       * 默认: 'dist'
       */
      outDir: "dist",

      /**
       * 静态资源存放目录（相对于 outDir）
       * 默认: 'assets'
       */
      assetsDir: "assets",

      /**
       * 静态资源在构建时小于此阈值的将被内联为 base64 URL
       * 设置为 0 则完全禁用内联
       * 默认: 4096 (4kb)
       */
      assetsInlineLimit: 4096,

      /**
       * 构建时是否将 CSS 代码分割到异步 chunk 中
       * 默认: true
       */
      cssCodeSplit: true,

      /**
       * 是否为异步 chunk 创建对应的 CSS 文件
       * 默认: true
       */
      cssTarget: "modules", // 或者 'no_modules'

      // ========== 源代码映射配置 ==========

      /**
       * 源代码映射配置
       * 可选值:
       * - false: 不生成 sourcemap
       * - true: 生成独立的 sourcemap 文件
       * - 'inline': 将 sourcemap 内联到文件中
       * - 'hidden': 生成 sourcemap 但不包含 sourceMappingURL 注释
       * 默认: false
       */
      sourcemap: false,

      /**
       * 构建后是否生成 manifest.json 文件
       * manifest 文件包含了所有输出文件与对应源文件的映射关系
       * 默认: false
       */
      manifest: false,

      /**
       * 构建后是否生成 SSR 的 manifest 文件
       * 默认: false
       */
      ssrManifest: false,

      // ========== 构建目标配置 ==========

      /**
       * 设置构建目标
       * 可选值: 'modules' | 'esnext' | 等
       * 默认: 'modules'
       */
      target: "modules",

      /**
       * 要包含的 polyfill
       * 默认: true
       */
      polyfillModulePreload: true,

      // ========== 模块系统配置 ==========

      /**
       * 库模式配置（当构建库时使用）
       */
      lib: {
        // 库的入口文件
        entry: "./src/main.js",
        // 库名称
        name: "MyLib",
        // 输出文件名（不包括扩展名）
        fileName: format => `my-lib.${format}.js`,
        // 输出的格式
        formats: ["es", "umd", "cjs"],
      },

      // ========== Rollup 配置 ==========

      /**
       * 直接传递给 Rollup 的配置选项
       */
      rollupOptions: {
        /**
         * 入口文件
         * 默认: 自动从 HTML 文件中提取
         */
        input: {
          main: "./index.html",
          admin: "./admin.html",
        },

        /**
         * 输出配置
         */
        output: {
          /**
           * 生成 chunk 的名称格式
           */
          chunkFileNames: "assets/js/[name]-[hash].js",

          /**
           * 生成入口 chunk 的名称格式
           */
          entryFileNames: "assets/js/[name]-[hash].js",

          /**
           * 生成资源文件的名称格式
           */
          assetFileNames: assetInfo => {
            const extType = assetInfo.name.split(".")[1];
            if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
              return "assets/images/[name]-[hash][extname]";
            }
            if (/css/i.test(extType)) {
              return "assets/css/[name]-[hash][extname]";
            }
            return "assets/[name]-[hash][extname]";
          },

          /**
           * 手动分块配置
           */
          manualChunks: id => {
            // 将 node_modules 中的依赖打包到单独的 chunk
            if (id.includes("node_modules")) {
              return "vendor";
            }
          },
        },

        /**
         * 外部依赖（不打包到 bundle 中）
         */
        external: ["some-external-dependency"],

        /**
         * 插件配置
         */
        plugins: [
          // 自定义 Rollup 插件
        ],
      },

      // ========== 高级配置 ==========

      /**
       * 设置为 false 可以禁用最小化混淆
       * 或指定使用哪种最小化工具（terser | esbuild）
       * 默认: 'esbuild'
       */
      minify: "esbuild",

      /**
       * 启用/禁用 gzip 压缩大小报告
       * 默认: false
       */
      reportCompressedSize: true,

      /**
       * chunk 大小警告的限制（以 kbs 为单位）
       * 默认: 500
       */
      chunkSizeWarningLimit: 500,

      /**
       * 设置为 false 来禁用将构建后的文件写入磁盘
       * 这常用于编程式地调用 build 时
       * 默认: true
       */
      write: true,

      /**
       * 设置为 false 来禁用构建时清空输出目录
       * 默认: true
       */
      emptyOutDir: true,

      /**
       * 自定义底层的 esbuild 配置
       */
      esbuild: {
        // 在构建时移除 console 和 debugger
        drop: ["console", "debugger"],
        // 最小化配置
        minify: true,
        // 目标环境
        target: "es2015",
      },

      /**
       * 自定义 terser 配置（当使用 terser 作为 minify 时）
       */
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },

      // ========== 开发服务器配置 ==========

      /**
       * 开发服务器配置（虽然属于 build 配置，但影响开发时行为）
       */
      server: {
        port: 3000,
        open: true,
      },

      // ========== 预览服务器配置 ==========

      /**
       * 预览构建结果的服务器配置
       */
      preview: {
        port: 5000,
        open: true,
      },
    },
  };
});
